<script lang="ts" setup>
import { ref } from 'vue';
import {
  ElRadioGroup,
  ElRadio,
  ElSelect,
  ElOption,
  ElButton,
  ElMessage,
  ElMessageBox
} from 'element-plus';
import { usePromptStore } from '../stores/promptStore';

const promptStore = usePromptStore();

// 使用ref定义文件输入引用
const fileInput = ref<HTMLInputElement>();

// 重置设置
const resetSettings = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重置所有设置和数据吗？此操作不可恢复。',
      '确认重置',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    await promptStore.resetAll();
    ElMessage.success('设置已重置');
  } catch {
    // 用户取消重置
  }
};

// 导出数据
const exportData = () => {
  const data = {
    groups: promptStore.groups,
    userSettings: promptStore.userSettings,
    exportTime: new Date().toISOString()
  };
  
  const blob = new Blob([JSON.stringify(data, null, 2)], { 
    type: 'application/json' 
  });
  
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `prompt-assistant-backup-${new Date().getTime()}.json`;
  a.click();
  
  URL.revokeObjectURL(url);
  ElMessage.success('数据导出成功');
};

// 导入数据
const importData = (event: Event) => {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = async (e) => {
    try {
      const content = e.target?.result as string;
      const data = JSON.parse(content);
      
      // 验证数据格式
      if (!data.groups || !data.userSettings) {
        throw new Error('无效的数据格式');
      }
      
      await ElMessageBox.confirm(
        '导入数据将覆盖当前所有设置和数据，确定要继续吗？',
        '确认导入',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      );
      
      await promptStore.importData(data.groups, data.userSettings);
      
      ElMessage.success('数据导入成功');
      
      // 清空文件输入
      input.value = '';
    } catch (error) {
      ElMessage.error('导入失败：' + (error instanceof Error ? error.message : '未知错误'));
      input.value = '';
    }
  };
  
  reader.readAsText(file);
};
</script>

<template>
  <div class="settings-panel">
    <div class="settings-section">
      <h3>数据管理</h3>
      
      <div class="setting-item">
        <label>导出数据</label>
        <ElButton @click="exportData">导出数据</ElButton>
        <p class="setting-description">将当前所有要素组和设置导出为JSON文件</p>
      </div>
      
      <div class="setting-item">
        <label>导入数据</label>
        <div>
          <input 
            type="file" 
            accept=".json" 
            @change="importData"
            style="display: none;"
            ref="fileInput"
          />
          <ElButton @click="fileInput?.click()">选择文件导入</ElButton>
        </div>
        <p class="setting-description">从JSON文件导入要素组和设置</p>
      </div>
      
      <div class="setting-item">
        <label>重置设置</label>
        <ElButton type="danger" @click="resetSettings">重置所有设置</ElButton>
        <p class="setting-description">清除所有数据并恢复默认设置</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.settings-panel {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}

.settings-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.settings-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.setting-item {
  margin-bottom: 20px;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.setting-description {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.about-info {
  font-size: 14px;
  line-height: 1.6;
}

.about-info p {
  margin: 8px 0;
}

/* 文件输入样式 */
input[type="file"] {
  display: none;
}
</style>